import "./index.scss"
import {Image, Space, Table} from 'antd';
import React, {useEffect, useState} from 'react';
import {useNavigate} from "react-router-dom";
import ConfirmDialog from "../confirmDialog";
import store from "../../../store";//哪个组件需要用到store的数据就在哪个组件引入
import {observer} from 'mobx-react'  //观察者,被它所包裹的组件就是响应式的，改了数据页面就会更新

const ContentList = () => {
    const navigate = useNavigate()
    //是否显示确认对话框
    const [isModalOpen, setIsModalOpen] = useState(false);
    //当前点击的content状态
    const [currentStatus, setCurrentStatus] = useState('')
    const columns = [
        {
            title: '内容id',
            dataIndex: 'id',
            render: (text) => <span className={"contentId"}>{text}</span>,
        },
        {
            title: '封面',
            dataIndex: 'cover',
            render: (cover) => <Image width={72} height={45} src={cover}/>
        },
        {
            title: '内容名称',
            dataIndex: 'name',
        },
        {
            title: '所属app',
            dataIndex: 'app',
        },
        {
            title: '作者',
            dataIndex: 'writer',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (text, {state}) => <span className={state === '下架' ? 'colorRed' : ''}>{text}</span>
        },
        {
            title: '价格',
            dataIndex: 'price',
        },
        {
            title: '标签',
            dataIndex: 'label',
            render: (_, {label}) => {
                if (label) {
                    return <>
                        {label.split(',').map(v => {
                            return <div className={"label"} key={v}>
                                {v}
                            </div>
                        })}
                    </>
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => goToEdit(record)}>编辑</a>
                    <a onClick={() => setStatue(record)}
                       className={record.state === '上架' ? 'colorGrey' : ''}>{record.state === '上架' ? '下架' : '上架'}</a>
                </Space>
            )
        },
    ];
    // rowSelection object indicates the need for row selection
    const [selectionType, setSelectionType] = useState('checkbox');
    //点击编辑
    const goToEdit = (row) => {
        console.log(row)
        navigate('/home/editContent', {replace: false, state: {row: row}})
    }
    // 点击上架/下架
    const setStatue = (row) => {
        let ids=[]
        ids.push(row.id)
        store.content.setSelectRowKeys(ids)
        setCurrentStatus(row.state)
        setIsModalOpen(true)
    }
    //点击确认对话框确定按钮
    const handleOk = () => {
        store.content.setContentState(currentStatus==='上架'?'下架':'上架')
        setIsModalOpen(false);
    };
    //点击确认对话框取消按钮
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //多选
    const onSelectChange = (selectedRowKeys, selectedRows, {type}) => {
        store.content.setSelectRowKeys(selectedRowKeys)
    }
    useEffect(() => {
        if (store.content.contentList.length === 0) {
            store.content.getAllContent()
        }
    }, [])
    return (
        <div id={'content_table'}>
            <Table
                rowSelection={{
                    type: selectionType,
                    onChange: onSelectChange,
                }}
                columns={columns}
                dataSource={store.content.contentList}
                rowKey={(record) => record.id}
                rowClassName={'rowColor'}
                className={'table'}
                pagination={{
                    defaultPageSize:5
                }}
                // selectedRowKeys={[1]}
            />
            <ConfirmDialog
                isModalOpen={isModalOpen}
                text={currentStatus === '上架' ? '确定下架该内容吗?' : '确定上架该内容吗?'}
                handleOk={handleOk}
                handleCancel={handleCancel}
            />
        </div>
    );
}
export default observer(ContentList)